<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane name="1" label="基本信息"/>
        <el-tab-pane name="2" label="数据项"/>
        <el-tab-pane name="3" label="数据预览"/>
        <el-tab-pane name="4" label="数据下载"/>
      </el-tabs>
      <div v-show="activeName === '1'">
        <el-form-item label="数据名称:" prop="sourceName">
          {{ formData.sourceName }}
        </el-form-item>
        <el-form-item label="数据编号:" prop="sourceCode">
          {{ formData.sourceCode }}
        </el-form-item>
        <el-form-item label="数据量:" prop="sourceNum">
          {{ formData.sourceNum }}
        </el-form-item>
        <el-form-item label="数据来源:" prop="sourceFrom">
          {{ formData.sourceFrom }}
        </el-form-item>
        <el-form-item label="描述:" prop="sourceDesc">
          {{ formData.sourceDesc }}
        </el-form-item>
        <el-form-item label="附件:" prop="file">
          <UploadFile
            v-model="formData.file"
            :limit="1"
            disabled
          />
        </el-form-item>
        <el-divider content-position="left">共享与访问</el-divider>
        <el-form-item label="共享状态:" prop="sourceShareStatus">
          <dict-tag :type="DICT_TYPE.DATA_SHARE_STATUS" :value="formData.sourceShareStatus" />
        </el-form-item>
        <el-form-item label="数据接口:" prop="sourceApi">
          {{ formData.sourceApi }}
        </el-form-item>
      </div>
      <div v-show="activeName === '2'">
        <el-table :data="formData.list" :stripe="true" :show-overflow-tooltip="true">
          <!-- <el-table-column label="主键" align="center" prop="id" /> -->
          <el-table-column label="#" align="center" type="index" width="50" fixed="left" />
          <el-table-column label="数据元名称" align="center" prop="sourceName" />
          <el-table-column label="数据元英文" align="center" prop="sourceCode" />
          <el-table-column label="数据元类型" align="center" prop="sourceType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.SOURCE_TYPE" :value="scope.row.sourceType" />
            </template>
          </el-table-column>
          <el-table-column label="描述" align="center" prop="sourceDesc"/>
          <el-table-column label="操作" align="center" min-width="120px" fixed="right">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="openDetail(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="activeName === '3'">
        <el-table :data="formData.list" :stripe="true" :show-overflow-tooltip="true">
          <!-- <el-table-column label="主键" align="center" prop="id" /> -->
          <el-table-column label="#" align="center" type="index" width="50" fixed="left" />
          <el-table-column label="单位名称" align="center" prop="sourceName" />
          <el-table-column label="机构代码" align="center" prop="sourceCode" />
          <el-table-column label="联系人" align="center" prop="sourceType"/>
          <el-table-column label="联系电话" align="center" prop="sourceDesc"/>
          <el-table-column label="地址" align="center" prop="sourceDesc"/>
        </el-table>
      </div>
      <div v-show="activeName === '4'">
        <div class="flex items-center justify-between" style="width: 100%;">
          <div>格式筛选：
            <span class="mr-5px">全部</span>
            <span class="mr-5px">XLS</span>
            <span class="mr-5px">XML</span>
            <span class="mr-5px">JSON</span>
            <span class="mr-5px">CSV</span>
            <span class="mr-5px">RDF</span>
            <span class="mr-5px">其它</span>
          </div>
          <div>
            <el-button
              type="primary"
              @click="handleExport"
              :loading="exportLoading"
              v-hasPermi="['dr:source-apply:export']"
            >批量下载</el-button>
            <el-button
              type="primary"
            >全选</el-button>
          </div>
        </div>
        <el-table :data="formData.list1" :stripe="true" :show-overflow-tooltip="true">
          <!-- <el-table-column label="主键" align="center" prop="id" /> -->
          <el-table-column label="#" align="center" type="selection" width="50" fixed="left" />
          <el-table-column label="格式" align="center" prop="ext" />
          <el-table-column label="文件" align="center" prop="fileUrl" />
          <el-table-column label="大小" align="center" prop="fileSize"/>
          <el-table-column label="更新时间" align="center" prop="updateTime"/>
        </el-table>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="dialogVisible = false" type="primary">确 认</el-button>

    </template>

    <!-- 资源详情 -->
    <SourceDetail v-model:visible="detailVisible" :data="currentRow" />
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { formatDate } from '@/utils/formatTime'
import download from '@/utils/download'
import { SourceVO } from '@/api/dr/source'
import { SourceApplyApi, SourceApplyVO } from '@/api/dr/sourceapply'
import { getSimpleUserList } from '@/api/system/user'

defineOptions({ name: 'SourceDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
const message = useMessage() // 消息弹窗
// 弹窗的标题
const dialogTitle = ref('数据共享查看')
const applyUserList = ref<any>([]) // 申请人列表
const formLoading = ref(false)
const exportLoading = ref(false) // 导出的加载中
const detailVisible = ref<boolean>(false)
const currentRow = ref<SourceVO>()

const activeName = ref('1')

const	formData = ref<SourceApplyVO | any>({})
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await SourceApplyApi.exportSourceApply({})
    download.excel(data, '资源利用.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// 详情弹窗
const openDetail = (row: any) => {
  currentRow.value = { ...row }
  detailVisible.value = true
}

const getDetail = () => {
  formLoading.value = true
  SourceApplyApi.getSourceApply(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
  }).finally(() => {
    formLoading.value = false
  })
}
const getOptions = () => {
  getSimpleUserList().then(list => {
    // console.log('getSimpleUserList', list)
    applyUserList.value = list
  })
}
const open = () => {
  getDetail()
  getOptions()
}
</script>

<style lang="scss" scoped>
</style>
